import getComponentRootDom from './getComponentRootDom.js';
import Icon from '../components/Icon/index.vue';
import styles from './message.module.less';
/**
 * 
 * @param {String} content 评论内容
 * @param {String} type icon类型
 * @param {Number} duration 多久消失
 * @param {*} container 显示到的容器
 */
export default function (options = {}) {
    var content = options.content || "";
    var type = options.type || "info";
    var duration = options.duration || 2000;
    var container = options.container || document.body;
    // 创建消息元素
    var div = document.createElement('div');
    // 得到组件渲染的dom-->icon
    var iconDom = getComponentRootDom(Icon, { type: 'info' })
    div.innerHTML = `<span class="${styles.icon}">${iconDom.outerHTML}</span><div>${content}</div>`;
    // 设置样式
    div.className = `${styles.message} ${styles['message-' + type]}`;

    // 将div加入到容器中
    // if (!container) {
    //     container = document.body;
    // } else {
    //     // 容器的position是否改动过
    //     if (getComputedStyle(container).position === 'static') {
    //         container.style.position = 'relative';
    //     }
    // }

    // 容器的position是否改动过
    if (options.container) {
        if (getComputedStyle(container).position === 'static') {
            container.style.position = 'relative';
        }
    }


    container.appendChild(div);
    // 浏览器强行渲染
    div.clientHeight; // 导致reflow

    // 回归到正常位置
    div.style.opacity = 1;
    div.style.transform = 'translate(-50%, -50%)';

    // 等一段时间，消失
    setTimeout(() => {
        div.style.opacity = 0;
        div.style.transform = 'translate(-50%, -50%) translateY(-25px)';
        div.addEventListener('transitionend', function () {
            div.remove();
            // 运行回调函数
            options.callback && options.callback();
        }, { once: true })
    }, duration)

}